﻿
@{
    ViewBag.Title = "Index";
}

<style>

    #left{
        padding-left: 80px;
    }

    #row-txtDisplay{
        margin: 5px 0 10px 0;
    }

    #txtDisplay{
        margin-left: 125px;
    }

    #v_number_control {
        margin-left: 50px;
    }
    
    #v_symbols {
        /*border: 1px solid;*/
    }
    
    #v-controls {
        border: 1px solid;
        padding: 0px;
        width: 505px;
    }

    .v-control {
        padding: 0px;
        margin-right: 27px;
        width: 57px;
        height: 400px;
        border-left: 1px solid;
        border-right: 1px solid;
        float: left;
    }

    #v-control-1{
        margin-left: -1px;
    }

    .separate{
        height: 33px;
    }

    .v-control-separate {
        height: 7px;
    }

    .image-control{
        /*margin-left: 0px;*/
        width: 55px;
        height: 42px;
    } 
    
    #read-vertical {
    }

    #h-controls {
        border: 1px solid;
        padding: 0px;
        width: 386px;
        height: 415px;
    }

    .h-control {
        height: 49px;
        padding: 0px;
        border-top: 1px solid;
        border-bottom: 1px solid;
        margin-bottom: 20px;
    }

    #h-control-1{
        margin-top: -1px;
    }

</style>

<div class="row">
    <div id="left" class="col-md-8">
        <div id="row-txtDisplay" class="row">
            <input class="form-control" type="text" id="txtDisplay" readonly />
        </div>


        <div id="read-horizontal" class="row">

            <!--
            <img id="v_number_control" src="~/Images/vertical/v_number_control.PNG" />
            -->

            <div class="row">

                <div id="v_symbols" class="col-md-1">
                    <img src="~/Images/vertical/v_symbols.PNG" />
                </div>

                <div id="h-controls" class="col-md-11">

                    <div id="h-control-1" class="control h-control">
                    </div><!-- /#h-control-1-->

                    <div id="h-control-2" class="control h-control">
                    </div><!-- /#h-control-2-->

                    <div id="h-control-3" class="control h-control">
                    </div><!-- /#h-control-3-->

                    <div id="h-control-4" class="control h-control">
                    </div><!-- /#h-control-4-->

                    <div id="h-control-5" class="control h-control">
                    </div><!-- /#h-control-5-->

                    <div id="h-control-6" class="control h-control">
                    </div><!-- /#h-control-6-->

                </div>
            </div>
        </div><!-- /#read-vertical -->



        <div id="read-vertical" class="row">

                
            <img id="v_number_control" src="~/Images/vertical/v_number_control.PNG" />

            <div class="row">

                <div id="v_symbols" class="col-md-1">
                    <img src="~/Images/vertical/v_symbols.PNG" />
                </div>

                <div id="v-controls" class="col-md-11">

                    <div id="v-control-1" class="control v-control">

                        <img src="~/Images/vertical/v_control_1.PNG" />

                        <div class="separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                    </div><!-- /#v-control-1-->

                    <div id="v-control-2" class="control v-control">

                        <img src="~/Images/vertical/v_control_2.PNG" />

                        <div class="separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />

                    </div><!-- /#v-control-2-->

                    <div id="v-control-3" class="control v-control">

                        <img src="~/Images/vertical/v_control_3.PNG" />

                        <div class="separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />

                    </div><!-- /#v-control-3-->

                    <div id="v-control-4" class="control v-control">

                        <img src="~/Images/vertical/v_control_4.PNG" />

                        <div class="separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />

                    </div><!-- /#v-control-4-->

                    <div id="v-control-5" class="control v-control">

                        <img src="~/Images/vertical/v_control_5.PNG" />

                        <div class="separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />

                    </div><!-- /#v-control-5-->

                    <div id="v-control-6" class="control v-control">

                        <img src="~/Images/vertical/v_control_6.PNG" />

                        <div class="separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />
                        <div class="v-control-separate"></div>

                        <img class="image-control" src="~/Images/vertical/line.PNG" />

                    </div><!-- /#v-control-6-->

                    <div style="clear: left"></div>

                </div>

            </div> 
        </div><!-- /#read-vertical -->
    </div>
    <div class="col-md-4">

    </div>
</div>

